<template>
  <div style="width: 380px; margin: 0 0 20px 0; display: flex">
    <a-input-search v-model:value="search" placeholder="请输入账号名称" enter-button @search="onSearch" />
    <a-button style="margin: 0 10px" type="primary" :loading="iconLoading" @click="enterIconLoading">
      刷新本页
    </a-button>
  </div>
  <CerTable :columns='columns' :dataList='dataList' @onDataLists='onDataLists' :pagination='pagination' @onClickUpdata='onClickUpdata' @onClickDelete='onClickDelete' />
</template>

<script lang='ts'>
import { reactive, Ref, ref, toRefs } from "vue";
import columns from "./method/CerTableConfig";
import CerTable from "@/components/CerModule/CerTable/CerTable.vue";
import { getcer, searchcer } from "@/api/cerApi/index";
import { $message } from "@/components/AntDesign/message";
import { AxiosResponse } from "axios";
export default {
  name: "账号列表 ",
  components: {
    CerTable,
  },
  setup() {
    const data = reactive({
      bool: true,
      dataList: [],
      pagination: {
        total: 0,
        pageSize: 8,
        hideOnSinglePage: true,
        current: 1,
      },
    } as any);

    async function dataLists(pageNo = 1) {
      try {
        const dataLists = await getcer({
          pageNo,
          pageSize: 8,
        });
        if (dataLists.data.data) {
          dataLists.data.data.forEach((element: any) => {
            element.key = element._id;
          });
          data.dataList = dataLists.data.data;
          data.pagination.total = dataLists.data.total;
        }
      } catch (error) {
        $message("error", error.data.message);
      }
    }
    dataLists();

    /* 分页事件 */
    function onDataLists(val: number) {
      data.pagination.current = val;
      dataLists(val);
    }

    /* 刷新页面 */
    const iconLoading = ref<boolean>(false);
    function enterIconLoading() {
      iconLoading.value = true;
      dataLists(data.pagination.current);
      //$message("success", "刷新成功");
      iconLoading.value = false;
    }

    /* 更新数据 */
    function onClickUpdata({
      index,
      status,
    }: {
      index: number;
      status: boolean;
    }) {
      data.dataList[index].status = status;
    }

    /* 删除数据 */
    function onClickDelete(index: number) {
      // data.dataList.splice(index, 1);
      enterIconLoading();
    }

    /* 搜索事件 */
    const search: Ref<string> = ref("");
    async function onSearch() {
      try {
        data.loading = true;
        if (search.value) {
          const searchdata: AxiosResponse = await searchcer({
            name: search.value,
          });
          search.value = "";
          if (searchdata.data.length > 0) {
            searchdata.data[0].key = searchdata.data[0]._id;
            data.dataList = searchdata.data;
            data.loading = false;
            return;
          }
          data.dataList = [];
          data.loading = false;
        }
      } catch (error) {
        $message("error", error.data.message);
      }
    }

    return {
      ...toRefs(data),
      onDataLists,
      columns,
      enterIconLoading,
      onClickDelete,
      onClickUpdata,
      iconLoading,
      onSearch,
      search,
    };
  },
};
</script>
<style lang="less" scoped>
.ant-btn:not(:last-child) {
  margin-right: 10px;
}
.ant-btn,
.ant-tag {
  border-radius: 4px;
}
.ant-tag {
  cursor: pointer;
}
</style>